<template>
    <div class="categories">
        <template v-for="item in categories">
            <div class="item">
                <img :src="item.pictureUrl" alt="">
                <span class="title">{{ item.title }}</span>
            </div>
        </template>
    </div>
</template>

<script setup>
import useCategoryStore from "@/store/modules/category.js"
import { storeToRefs } from "pinia";

const categoryStore = useCategoryStore()
categoryStore.fetchCategoriesAction()
const { categories } = storeToRefs(categoryStore)
</script>


<style lang='less' scoped>
.categories {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow-x: auto;
    padding: 10px 0;
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .item {
        width: 20%;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        img {
            width: 32px;
            margin-bottom: 4px;
        }
    }
}
</style>